<template>
  <div class="list-box">
    <transition-group :class="['list']" :style="listHeight" tag="div" name="todo-list">
      <div class="item grid" v-for="(item, inx) in list" :key="item.id" draggable @dragstart="handleDrag($event, inx)" @dragend="handleDrag($event)" @dragover.prevent="handleDragOver" @dragenter="handleDragEnter" @drop="handleDrop($event, inx)">
        <div :class="['text', { finish: item.status == 2 }]" :title="item.value">{{ item.value }}</div>
        <div class="btn">
          <dw-button type="warning" v-if="item.status == 0" waiting @click="updateRow(inx, 1)">执行中</dw-button>
          <dw-button type="primary" v-if="item.status == 1" @click="updateRow(inx, 0)">去执行</dw-button>
        </div>
        <div class="btn">
          <dw-button type="success" v-if="item.status != 2" @click="updateRow(inx, 2)">完成</dw-button>
        </div>
        <div class="btn">
          <dw-button type="danger" @click="deleteRow(inx)">删除</dw-button>
        </div>
      </div>
    </transition-group>
    <div>
      <dw-button type="info" class="pack-btn" :disabled="list.length <= 3" @click="packUp()">{{ isShowAll ? "收起" : "展开" }}</dw-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {
      isShowAll: true,
      dragging: null,
    };
  },
  computed: {
    listHeight() {
      const rowHeight = window.screen.width <= 768 ? 40 : 50;
      let height = this.list.length * rowHeight;
      if (!this.isShowAll && this.list.length > 3) height = 3 * rowHeight;
      return `height:${height}px`;
    },
  },
  methods: {
    updateRow(inx, status) {
      // this.isShowAll = false;
      this.$emit("update-row", inx, status);
    },
    deleteRow(inx) {
      this.$emit("delete-row", inx);
      if (this.list.length <= 3) {
        // 跟着动画一起变
        setTimeout(() => {
          this.isShowAll = true;
        }, 500);
      }
    },
    // 展开
    packUp() {
      if (this.list.length <= 3) return;
      this.isShowAll = !this.isShowAll;
    },
    /**
     * 1、被拖对象：dragstart事件，被拖动的元素，开始拖放触发
     * 2、被拖对象：drag事件，被拖放的元素，拖放过程中
     * 3、经过对象：dragenter事件，拖放过程中鼠标经过的元素，被拖放的元素“开始”进入其它元素范围内（刚进入）
     * 4、经过对象：dragover事件，拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)
     * 5、经过对象：dragleave事件，拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围
     * 6、目标地点：drop事件，拖放的目标元素，其他元素被拖放到本元素中
     * 7、被拖对象：dragend事件，拖放的对象元素，拖放操作结束
     */
    handleDrag(e, inx = null) {
      this.dragging = inx;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move"; // 此处不生效？？？
      // console.log("handleDragOver", e);
    },
    // 拖拽移动过程
    handleDragEnter(e) {
      // console.log("handleDragEnter", e);
    },
    // 鼠标松开
    handleDrop(e, inx) {
      e.dataTransfer.effectAllowed = "move"; // 还是不生效？？？
      // 当前移动的状态
      const curStatus = this.list[this.dragging].status;
      // 如果是执行中就不能移动 （置顶）
      if (!curStatus) return;
      // 限制范围 去执行（不能高于正在执行 不能低于已完成） 已完成（不能高于去执行）
      const doingInx = this.list[0].status ? 0 : 1;
      const isFinishedNum = this.list.filter(({ status }) => status == 2).length;
      const finishInx = this.list.length - 1 - isFinishedNum;
      // console.log("doingInx", doingInx, "finishInx", finishInx);
      if (curStatus == 1) {
        // 去执行的限制
        if (inx < doingInx) inx = doingInx;
        else if (inx > finishInx) inx = finishInx;
      } else {
        // 已完成的限制
        if (inx < finishInx + 1) inx = finishInx + 1;
      }
      if (inx === this.dragging) return;
      this.$emit("switch-row", this.dragging, inx);
    },
  },
};
</script>

<style scoped>
.list-box {
  margin-top: 50px;
  width: 100%;
  font-size: 14px;
}
.list {
  width: 100%;
  overflow: scroll;
  transition: height 0.5s;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  position: relative;
  max-height: 62vh;
}
/* 隐藏scroll滚动条但不影响滚动功能 */
.list::-webkit-scrollbar {
  display: none;
}
.item {
  height: 50px;
  width: 100%;
  grid-template: 1fr/58% 16% 13% 13%;
  border-top: 1px solid #d9d9d9;
  padding: 0 10px;
  align-items: center;
  box-sizing: border-box;
}
.item .text {
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finish {
  text-decoration: line-through;
}
.pack-btn {
  width: 100%;
  border-radius: 0 0 4px 4px;
}
@media screen and (max-width: 768px) {
  .list-box {
    margin-top: 40px;
    font-size: 12px;
  }
  .item {
    height: 40px;
    grid-template: 1fr/1fr 82px 52px 52px;
  }
  .item .btn {
    justify-self: right;
  }
}
/* 操作 */
.todo-list-move {
  transition: all 0.5s;
}
.todo-list-enter-active {
  animation: enter 0.45s;
}
.todo-list-leave-active {
  animation: leave 0.5s;
  position: absolute;
}
/* 进入动画 */
@keyframes enter {
  from {
    opacity: 0;
    z-index: -1;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    z-index: 0;
    transform: translateX(0);
  }
}
/* 离开动画 */
@keyframes leave {
  to {
    opacity: 0;
    z-index: -1;
    transform: translateX(100%);
  }
}
</style>
